<template>
  <div class="content">
    <div class="hos_produce_content">
      <ul class="tab_select clearfloat f15 color_333">
        <li><span :class="{on: currentIndex == 0 }" @click="showContext(0)">选你喜欢</span></li>
        <li><span :class="{on: currentIndex == 1 }" @click="showContext(1)">选购清单</span></li>
      </ul>
    </div>
    <div v-show="currentIndex == 0">
      <template v-for="(item, index) in categories">
        <div class="varity_content">
          <span class="data_left">{{ item.categoryName }}</span>
        </div>
        <div class="all">
          <div v-for="product in item.sxProductBasicInfos" class="yytc_content">
            <div class="left"><img :alt="product.pname" :src="product.pindexImg"></div>
            <div class="right">
              <p class="product_name">
                {{ product.pname }}
              </p>
              <span class="product_detail" @click="handleDetail(product.pid)"/>
              <div class="price_content">
                <p class="product_price">
                  <span class="price">{{ product.pprice }}<b>元</b></span>
                  <input :value="product.pid" :checked="ifChecked(product.pid)" type="radio" class="radio-bg" @click="addToCart(product, $event)">
                </p>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div v-show="currentIndex == 1" class="all">
      <div class="varity_content"/>
      <div v-for="item in cartList" class="yytc_content">
        <div class="yy_left">
          <input type="radio" checked class="yyradio-bg" @click="addToCart(item.product, $event)">
          <img :alt="item.product.pname" :src="item.product.pindexImg">
        </div>
        <div class="right">
          <p class="product_name  pt10">
            {{ item.product.pname }}
          </p>
          <span class="produce_chose">{{ item.productType.pname + '-' + item.itemConfig.itemValue }}</span>
          <span class="price_total">{{ item.total }}<b>元</b></span>
        </div>
        <div class="hr_bottom" style="width: calc(100% - 15px);"/>
      </div>
    </div>
    <div class="btn_group bgwhtie">
      <span>预约须知</span>
      <button @click="$router.push({ name: 'selectDate'})">选择日期</button>
    </div>
    <div v-if="isShowOrder" class="meal_content">
      <div class="meal_head">
        {{ product.pname }}
        <span class="close_icon" @click="isShowOrder = false" />
      </div>
      <div class="mealdetail_content" >
        <p class="produce_meal">
          产品类型
          <a>产品说明</a>
        </p>
        <div class="meal_detail" >
          <a v-for="item in productOptions" :class="{cur: item == selectProduct}" @click="selectProductF(item)">{{ item.pname }}</a>
        </div>
      </div>
      <div v-if="itemCodes && itemCodes.length > 0" class="mealdetail_content" >
        <p class="produce_meal">
          {{ itemCodes[0].itemName }}
          <a>{{ itemCodes[0].itemName }}说明</a>
        </p>
        <div class="meal_detail">
          <a v-for="item in itemCodes" :class="{cur: item == selectItemCode}" @click="selectItemF(item)">{{ item.itemValue }}</a>
        </div>
      </div>
      <div class="bottom_meal">
        <p>合计：<em>{{ total }}</em>元</p>
        <div class="comfirm_btn" @click="submitAddCard()">确 定</div>
      </div>
    </div >
  </div>
</template>

<script>
import indexApi from '@/api/photo/indexApi'
export default {
  name: 'UserCart',
  data() {
    return {
      currentIndex: 1,
      categories: [],
      isShowOrder: false,
      product: null,
      productOptions: [],
      selectRadio: null,
      selectProduct: null,
      selectItemCode: null
    }
  },
  computed: {
    itemCodes() {
      if (this.selectProduct && this.selectProduct.sxProductItemConfigs) {
        return this.selectProduct.sxProductItemConfigs
      } else {
        return []
      }
    },
    total() {
      let result = 0.0
      if (this.selectProduct) {
        result += this.selectProduct.pprice
        if (this.selectItemCode) {
          result += this.selectItemCode.itemPrice
        }
      }
      return result
    },
    cartList() {
      return this.$store.getters.cartList
    },
    cityId() {
      return this.$store.getters.cityId
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    showContext(index) {
      this.currentIndex = index
    },
    handleDetail(pid) {
      this.$router.push({ name: 'productDetails', params: { pid: pid }})
    },
    getInitData() {
      indexApi.getInitData({}).then(data => {
        this.categories = data.categories
      })
    },
    ifChecked(pid) {
      const index = this.$store.getters.findProduct(pid)
      if (index >= 0) {
        return true
      }
      return false
    },
    addToCart(product, event) {
      const isExist = this.ifChecked(product.pid)
      const el = event.currentTarget
      if (isExist) {
        // 提示是否删除购物车的产品
        this.$store.commit('removeCart', product.pid)
      } else {
        // 显示 添加产品框
        this.isShowOrder = true
        this.product = product
        this.getProductOptions()
      }
      this.selectRadio = el
    },
    getProductOptions() {
      if (!this.productOptions || this.productOptions.length === 0) {
        indexApi.getProductOptions({ cid: this.cityId, pid: this.product.pid }).then(data => {
          this.productOptions = data
          this.selectProductF(data[0])
        })
      }
    },
    selectProductF(product) {
      this.selectProduct = product
      this.selectItemCode = this.itemCodes && this.itemCodes.length > 0 ? this.itemCodes[0] : null
    },
    selectItemF(item) {
      this.selectItemCode = item
    },
    submitAddCard() {
      this.$store.commit('addCart', {
        product: this.product,
        productType: this.selectProduct,
        itemConfig: this.selectItemCode,
        peopleCount: this.peopleCount,
        total: this.total
      })
      this.selectRadio.checked = true
      this.isShowOrder = false
    }
  }
}
</script>

<style scoped>
  @import "../../assets/css/iconfont.css";
  @import "../../assets/css/login_selfcenter.css";
  @import "../../assets/css/index_appointment.css";
  @import "../../assets/css/reset.css";
</style>
